<template>
  <div class="quiz-bg">
    <div class="quiz-card">
      <div class="question">
        <div v-if="mode === 'en2zh'">
          <b>{{ current.abbr }} ({{ current.en }})</b> 的中文意思是？
        </div>
        <div v-else>
          <b>{{ current.zh }}</b> 的英文缩写是？
        </div>
      </div>
      <div class="options">
        <van-button
          v-for="(opt, idx) in options"
          :key="idx"
          :type="selected === idx ? (opt.correct ? 'success' : 'danger') : 'default'"
          :disabled="selected !== null"
          block
          class="option-btn"
          @click="choose(idx)"
        >
          {{ mode === 'en2zh' ? opt.zh : opt.abbr }}
        </van-button>
      </div>
      <div class="result" v-if="result">
        <span :style="{color: result === '答对了！' ? 'green' : 'red'}">{{ result }}</span>
      </div>
      <div class="actions">
        <van-button size="small" @click="next" class="action-btn">下一题</van-button>
        <van-button size="small" @click="toggleMode" class="action-btn">切换模式</van-button>
      </div>
      <div class="stats">
        已答：{{ total }}，正确：{{ correct }}，正确率：{{ rate }}%，总题数：{{ abbrs.length }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import abbrs from '../assets/abbr.json'

const mode = ref('en2zh') // en2zh or zh2en
const current = ref({})
const options = ref([])
const result = ref('')
const total = ref(0)
const correct = ref(0)
const selected = ref(null)

function getRandomOptions(correctItem) {
  // 选3个干扰项
  let pool = abbrs.filter(item => {
    if (mode.value === 'en2zh') {
      return item.zh !== correctItem.zh
    } else {
      return item.abbr !== correctItem.abbr
    }
  })
  let distractors = []
  while (distractors.length < 3 && pool.length > 0) {
    let idx = Math.floor(Math.random() * pool.length)
    distractors.push(pool[idx])
    pool.splice(idx, 1)
  }
  // 合并正确项和干扰项
  let opts = [
    { ...correctItem, correct: true },
    ...distractors.map(item => ({ ...item, correct: false }))
  ]
  // 随机排序
  for (let i = opts.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[opts[i], opts[j]] = [opts[j], opts[i]]
  }
  return opts
}

function randomQuestion() {
  selected.value = null
  result.value = ''
  current.value = abbrs[Math.floor(Math.random() * abbrs.length)]
  options.value = getRandomOptions(current.value)
}

function choose(idx) {
  if (selected.value !== null) return
  selected.value = idx
  total.value++
  if (options.value[idx].correct) {
    result.value = '答对了！'
    correct.value++
  } else {
    result.value = `答错了，正确答案：${mode.value === 'en2zh' ? current.value.zh : current.value.abbr}`
  }
}

function next() {
  randomQuestion()
}
function toggleMode() {
  mode.value = mode.value === 'en2zh' ? 'zh2en' : 'en2zh'
  randomQuestion()
}
const rate = computed(() => total.value ? ((correct.value / total.value) * 100).toFixed(1) : 0)

randomQuestion()
</script>

<style scoped>
.quiz-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #f0fdfa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 32px 0 rgba(80, 120, 200, 0.15);
  padding: 36px 28px 24px 28px;
  max-width: 420px;
  width: 100%;
  margin: 40px 0;
  transition: box-shadow 0.2s;
}
.question {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 28px;
  color: #2d3a4b;
  text-align: center;
}
.options {
  margin-bottom: 24px;
}
.option-btn {
  border-radius: 12px !important;
  font-size: 17px;
  margin-bottom: 16px;
  transition: box-shadow 0.2s, background 0.2s, border 0.2s;
  box-shadow: 0 4px 18px 0 rgba(80, 120, 200, 0.18), 0 1.5px 0 #e0e7ff;
  border: 2px solid #e0e7ff !important;
  background: #fafdff !important;
}
.option-btn:not([disabled]):hover {
  background: #e0e7ff !important;
  box-shadow: 0 8px 28px 0 rgba(80, 120, 200, 0.22);
  border-color: #b4c8f8 !important;
}
.result {
  margin: 18px 0 8px 0;
  text-align: center;
  font-size: 18px;
}
.actions {
  margin: 12px 0 0 0;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.action-btn {
  border-radius: 18px !important;
  font-size: 16px;
  padding: 0 22px;
  background: linear-gradient(90deg, #6fa8ff 0%, #4fd1c5 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px 0 rgba(80, 120, 200, 0.18);
  border: none !important;
  transition: background 0.2s, box-shadow 0.2s;
}
.action-btn:hover {
  background: linear-gradient(90deg, #4fd1c5 0%, #6fa8ff 100%) !important;
  box-shadow: 0 6px 18px 0 rgba(80, 120, 200, 0.22);
}
.stats {
  color: #888;
  font-size: 15px;
  margin-top: 22px;
  text-align: center;
}
</style> 